<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="car_list">
				<text>开户姓名：</text>
				<input class="uni-input" v-model="setPayData.name"  type="text" />
		</view>
		<view class="car_list">
				<text>收款银行：</text>
				<input  class="uni-input" v-model="setPayData.bankName"  type="text" />
		</view>
		<view class="car_list">
				<text>银行账户：</text>
				<input class="uni-input"  v-model="setPayData.cardNum"   type="number" />
		</view>
		<view class="retrieve_submit">
			<button class="exitbtn" @click="submitClick">保存</button>
		</view>
		<payKeyboard v-if="showKeyBoard" title="Mi安全键盘" @success="enterSuccess" @close="close"></payKeyboard> 
	</view>
</template>

<script>
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue';
	import {setPay} from '@/api/bonus.js'
	export default{
		components: { payKeyboard },
		data(){
			return{
				navstyle: {
					title: "添加银行卡",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				setPayData: {
					name: "",
					bankName: "",
					cardNum: "",
					type: "0",
					img: "",
					paypassword: ""
				},
				showKeyBoard:false,
			}
		},
		onLoad: function(option) {
			if (option.id) {
				this.navstyle.title="编辑银行卡"
				let n = JSON.parse(uni.getStorageSync("bankData"))
				let e = {
					id: option.id,
					name: n.name,
					bankName: n.bankName,
					cardNum: n.cardNum,
					type: "1",
					img: ""
				};
				this.setPayData = e;
			} else{
				this.navstyle.title="添加银行卡"
			}
			
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/bonus/card_list' // 替换成上一页的路径
				});
			},
			submitClick(){
				if(!this.setPayData.name){
					uni.showToast({
						title: '请输入开户姓名',
						duration: 2000
					});
					return
				}
				if(!this.setPayData.bankName){
					uni.showToast({
						title: '请输入收款银行',
						duration: 2000
					});
					return
				}
				if(!this.setPayData.cardNum){
					uni.showToast({
						title: '请输入银行卡号',
						duration: 2000
					});
					return
				}
				this.showKeyBoard = true;
			},
			// 输入正确的回调
			enterSuccess(password) {
				this.setPayData.paypassword = password;
				setPay(this.setPayData).then(response=>{
					if(response.code == 1){
						uni.showToast({
							title: '添加银行卡成功',
							duration: 2000
						});
						uni.reLaunch({
						  url: '/pages/bonus/card_list' // 替换成上一页的路径
						});
						
					}
					
				})
				this.showKeyBoard = false
			},
			// 点击[取消] 关闭输入框 的回调
			close(){
				this.showKeyBoard = false
			},
			
		}
	}
</script>

<style>
	.car_list {
	    display: flex;
	    align-items: center;
	    color: #3d4249;
	    width: 96%;
	    margin: auto;
	    margin-bottom: 10px;
	    padding: 10px;
	    border-radius: 3px;
	}
	.car_list .uni-input{
	    width: 70%;
	    height: 31px;
	    font-size: 16px;
	    line-height: 21px;
	    display: flex;
	    align-items: center;
	    background-color: #f1f1f1;
	    padding: 5px 10px 5px 5px;
	    border-radius: 4px 4px;
	}
	.retrieve_submit {
	    padding-bottom: 16px;
	    margin: 32px 32px 16px 32px;
	}
	.retrieve_submit button {
	    background: linear-gradient(#d66c6b, #ed6266);
	    border-radius: 26px;
	    color: #fff;
	    font-size: 14px;
	}
</style>